<template>
  <div class="login">
    <div class="login-item">
      <div class="login-item-title">手机号</div>
      <div class="login-item-info">
        <input placeholder="请输入手机号" autocomplete="off" type="telphone" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" v-model="teleml"/>
        <!---->
        <div v-if="hasTel" @click="clearStr('teleml')" class="login-item-info-icon"><i class="iconfont icon-cha"></i></div>
      </div>
    </div>
    <div class="login-item">
      <div class="login-item-title">验证码</div>
      <div class="login-item-info">
        <input placeholder="请输入验证码" autocomplete="off" type="tel" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6" v-model="ma"/>
        <!---->
        <div v-if="hasTel" @click="clearStr('ma')" class="login-item-info-icon"><i class="iconfont icon-cha"></i></div>
        <div class="login-item-info-btn" @click="getCheckCode" v-text="codeText"></div>
      </div>
    </div>
    <button class="to-login" @click="login">手机登录/注册</button>
    <div class="login-by-password" @click="loginChange('pwd')">账号密码登录</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
import { getCode, telRegisterLogin } from '@/api'
Vue.use(Toast)
export default {
  data () {
    return {
      teleml: '',
      ma: '',
      hasTel: false,
      hasMa: false,
      codeTimer: true,
      codeText: '获取验证码',
      time: 60
    }
  },
  props: {
    loginStyle: {
      type: String,
      default: 'pwd'
    }
  },
  methods: {
    loginChange (val) {
      this.$emit('my-event', val)
    },
    clearStr (val) {
      // console.log(val)
      if (val === 'teleml') {
        this.teleml = ''
      } else if (val === 'ma') {
        this.ma = ''
      }
    },
    getCheckCode () {
      if (this.codeTimer) {
        const timer = setInterval(() => {
          this.codeTimer = false
          this.time--
          // console.log(this.time)
          this.codeText = this.time + 's后再次发送'
          // console.log(this.codeText)
          if (this.time === 0) {
            clearInterval(timer)
            this.codeText = '获取验证码'
            this.codeTimer = true
          }
        }, 1000)
        /* 发送验证码 */
        getCode({ tel: this.teleml }).then(res => {
          if (res.data.code === '555') {
            console.log('发送失败')
          } else if (res.data.code === '200') {
            console.log(res.data)
            console.log('发送成功')
          }
        })
      }
    },
    login () {
      if (!this.teleml) {
        Toast('请输入手机号')
      } else if (!this.ma) {
        Toast('请输入验证码')
      } else {
        console.log(this.teleml, this.ma)
        telRegisterLogin({ tel: this.teleml, ckma: this.ma }).then(res => {
          console.log(res)
          const { code } = res.data
          switch (code) {
            case '10400':
              Toast('信息填写不完整')
              break
            case '10606':
            case '10888':
              Toast('登录成功')
              // 返回用户id、token、昵称 -- 保存在本地 - 返回上一页
              localStorage.setItem('userid', res.data.data.userid)
              localStorage.setItem('token', res.data.data.token)
              localStorage.setItem('nickname', res.data.data.nickname)
              // 给本地保存一个登录状态，用于前端校验
              // 加入购物车，获取本地loginState，如果未ok，进入服务器校验，如果不存在，不走服务器，直接进入登陆
              localStorage.setItem('loginState', 'ok')
              this.$router.go(-1)
              break
            case '10555':
              Toast('注册失败，验证码不正确')
              break
            default:
              break
          }
        })
      }
    }
  },
  watch: {
    teleml (newval, oldVal) {
      if (newval.length > 0) {
        this.hasTel = true
      }
    },
    ma (newval, oldVal) {
      if (newval.length > 0) {
        this.hasMa = true
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.login {
  padding: {
    left: 20px;
    right: 20px;
  };
  &-item {
    font-size: 12px;
    &-title{}
    &-info{
      margin-top: 5px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ececec;
      input {
        font-size: 16px;
        flex: 1;
        height: 40px;
        outline: 0;
        border: 0;
      }
      display: flex;
      &-btn{
        color: #ff734c;
        line-height: 40px;
      }
      &-btn2{
        color: #71797f;
        line-height: 40px;
      }
      &-icon {
        display: flex;
        align-items: center;
        margin-right: 10px;
        i {
          font-size: 10px;
        }
      }
    }
  }
  .to-login {
    @include rect(100%,0.42rem);
    margin-top: 10px;
    border: 0;
    outline: 0;
    background-color: #ff734c;
    font-size: 16px;
    color: #fff;
    border-radius: 0.21rem;
  }
  .login-by-password {
    margin-top: 30px;
    text-align: center;
    font-size: 17px;
    color: #71797f;
  }
}
</style>
